<template>
  <main class="container-fluid container-lg grid-setting">
    <div class="row">
      <!-- 選單 -->
      <div class="col-sm-3 col-xl-2" >
        <ul class="list-group mb-3 text-center">
          <li class="list-group-item border border-light disabled px-0">CATEGORY</li>
          <li class="list-group-item"
           @click="getItems(0)">
            ALL</li>
          <li class="list-group-item"
            v-for="itemCat in itemCatList " :key="itemCat.id"
            @click="getItems(itemCat.id)">
            {{ itemCat.name}}</li>
        </ul>
      </div>
    <div class="col-sm-9 col-xl-10">
        <ul class="row list-unstyled row-cols-1 row-cols-md-2 row-cols-xl-3">
          <li class="col mb-6"
            v-for="item in items" :key="item.id">
            <div class="card hover--shadow">
              <router-link class="text-decoration-none position-relative"
                :to="{ name: 'ProductDetail', params: { itemId: `${ item.id }` }}">
                <div class="favorite position-absolute shadow-black-30 hover--enlarge">
                  <!-- <a class="text-white" href="#"></a> -->
                  <!-- <a class="text-danger-300" href="#">
                    <i class="fas fa-heart fa-lg"></i>
                  </a> -->
                  <a :class="item.isStars ? 'text-danger-300' : 'text-white '" ref="one"  href="#"
                  @click.prevent="stars(item)">
                    <i class="fas fa-heart fa-lg"></i>
                  </a>
                </div>
                <div class="bg-cover rounded-top"
                  :style="`background-image: url(${ item.imageUrl }); padding-top: 70%;`">
                </div>
                <div class="card-body d-flex flex-column">
                  <div class="d-flex justify-content-between">
                    <h2 class="h4 card-title">{{ item.name }}</h2>
                    <h3 class="h6 font-weight-normal">
                      <i class="fas fa-tag mr-2"></i>{{ item.itemCat }}</h3>
                  </div>
                  <p class="m-3 text-muted">{{ item.content | contentLength(20) }}</p>
                  <div class="d-flex justify-content-between mt-auto">
                    <p class="text-gray mb-0">原价 <del>{{ item.oldPrice  }}</del></p>
                    <h4 class="h5 text-danger-500 font-family-roboto">
                      NT {{ item.newPrice }}</h4>
                  </div>
                </div>
                <div class="card-footer">
                  <a class="d-block text-decoration-none text-brown" href="#"
                    @click.prevent="addCart(item.id)">
                    <!-- <i class="fas fa-spinner fa-spin mx-1"
                      v-if="!isCart(item.id)"></i> -->
                    加入购物车</a>
                </div>
              </router-link>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </main>
</template>

<script>
  import Header from '../../components/Header.vue'
 export default {
    filters:{
      contentLength (value, num) {
        if (!value) return ''
        if (value.length > num) {
          const contentString = `${value.slice(0, num)} ...`
          return contentString
        }
        return value
      }
    },
    // 初始化函数
    created() {
      // 动态获取左侧菜单信息
      this.getItemCatList();
      this.getItems(0,this.$bus.USER_Id)

      // 设定模式选中按钮
      // this.defaultActive = window.sessionStorage.getItem("activeMenu")
    },

    data() {
      return {
        //左侧菜单数据
        itemCatList: [],
        nowCategoryStatus: 'all',
        items:[],
        cart:{
          userId: this.$bus.USER_Id,
          num: 1,
          itemId: ""
        }


      }
    },
    methods: {
      async getItemCatList() {
       const {data: result} =  await this.$http.get('/itemCat/getAll')
       if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
       this.itemCatList = result.data
      },

      async getItems(itemCatId,userId) {
        let url = null
        if(userId != null ) {
          url = "?itemCatId="+itemCatId +  "&userId=" +userId
        }else {
          url = "?itemCatId="+itemCatId
        }
        const{data: result} = await this.$http.get("/item/getItemList"+url)
        if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
        this.items = result.data
      },

      async addFavorite(itemId){
        if(this.$bus.USER_Id === null) {
          this.$router.push('login')
          return
        }
        const{data: result} = await this.$http.post("/stars/add",{userId: this.$bus.USER_Id , itemId: itemId }  )
        if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
        if(result.status === 200) this.$parent.fresh()
      },

      async removeFavorite(itemId,userId){
        if(this.$bus.USER_Id === null) {
          this.$router.push('login')
          return
        }
        const{data: result} = await this.$http.delete("/stars/"+userId+"/"+itemId)
        if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
        if(result.status === 200) this.$parent.fresh()
      },
      async addCart(itemId){
        if(this.$bus.USER_Id === null) {
          this.$router.push('login')
          return
        }
        this.cart.itemId = itemId
        // let num = 1
        // let userId = this.$bus.USER_Id
        const{data: result} = await this.$http.post("/cart/addCart",this.cart)
        if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
        if(result.status === 200) this.$parent.fresh()
      },
      stars(item){
        if(this.$bus.USER_Id === null) {
          this.$router.push('login')
          return
        }
        if(!item.isStars){
          this.addFavorite(item.id)
        }else{
          this.removeFavorite(item.id,this.$bus.USER_Id)
        }
        item.isStars= !item.isStars
      }
    }
  }
</script>

<style lang="scss" scoped>
.favorite {
  top: 12px;
  right: 12px;
}
</style>
